<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<title>赌我会瘦</title>
<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
</head>
<!-- end header -->

<body>
  <div class="page-group">
    <div class="page page-current bet-shopping-page bg-light-gray">
      <header class="bar bar-nav fb-header"  style="background: #000;">
			  <a class="icon icon-left pull-left"></a>
			  <h1 class="title">支持${userBet.user.nickname}</h1>
			</header>
			
      <div class="content">
        <div class="text-center participant-info">
          <img src="${user.avatar}" class="cover">
          <p class="name no-margin">${user.nickname}</p>
          <p class="gender no-margin">${user.gender}</p>
        </div>
        <div class="shopping-list">
          <div class="list-block " style="margin: .5rem 0;">
				    <ul>
				      <li>
				        <div class="item-content">
				          <div class="item-inner">
				            <div class="item-title" style="padding-left: .5rem;">支付金额</div>
				            <div class="item-after color-red">￥100.00</div>
				          </div>
				        </div>
				      </li>
				    </ul>
				  </div>
				  
	        <form>
		        <div class="list-block no-margin ">
					    <ul>
					      <li>
					        <div class="item-content">
					          <div class="item-inner">
					            <i class="iconfont icon-phone"></i>
					            <c:choose>
					              <c:when test="${not empty user.mobile}">
					                <div class="item-input">
					                  <input type="text" name="mobile" value="${user.mobile}" style="text-align: right;">
					                </div>
					              </c:when>
					              <c:otherwise>
					                <div class="item-input">
					                  <input type="text" name="mobile" placeholder="请输入您的手机号">
					                </div>
					                <a href="javascript:void(0);" class="get-code color-red">获取验证码</a>
					              </c:otherwise>
					            </c:choose>
					          </div>
					        </div>
					      </li>
					      <!-- <li>
					        <div class="item-content">
					          <div class="item-inner">
					            <i class="iconfont icon-captcha"></i>
					            <div class="item-input">
					              <input type="text" name="code" placeholder="请输入收到的验证码">
					            </div>
					            
					          </div>
					        </div>
					      </li> -->
					    </ul>
					  </div>
					  <a href="javascript:void(0);" id="submit" class="button fb-button button-big wechat-pay-button"><i class="iconfont icon-wechat"></i>&nbsp;微信支付</a>
					</form>
				</div>
        
        <%-- <div class="content-padded">
          <h1>竞猜者支付.jpg</h1>
        </div>
        <div class="content-block">
          <p><a href="${ctx.host}/bet-shopping/result?orderId=1" class="button button-big">微信支付</a></p>
        </div> --%>
      </div>
    </div>
  </div>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/bet-shopping/support-shopping-index.js" />
  <script type="text/javascript">
    require(['page/bet-shopping/support-shopping-index'], function(page) {
      page.init({
        "jsConfig": JSON.parse('${jsConfig}'),
        "unionid": '${user.unionid}',
        "userId": '${user.id}',
        "userBetId": '${userBet.id}',
        "support": '${support}',
        "avatar": '${user.avatar}'
      })
    })
  </script>
</body>
</html>